<!-- TrainSubmitUserInfo.html -->
<!DOCTYPE html>
<html class="base_gary_bg_color">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>新增调查题目页</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
		<style type="text/css" media="screen">
			.base_right_item {
				color: white;
			}
			a:active {
				color: #d9d9d9;
			}
			.mui-btn-blue {
				border: 1px solid #18b4ed;
				background-color: #18b4ed;
			}
			.base_content_div {
				margin-top: 64px;
			}
			.qusetionTypeDiv {
			}
			.width_10 {
				width: 10px;
			}
			.width_20 {
				width: 20px;
			}
			.mui-input-group .mui-input-row label {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				float: left;
				width: 15%;
				padding: 11px 15px;
			}
			.mui-input-group .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~
			textarea {
				float: right;
				width: 85%;
				margin-bottom: 0;
				padding-left: 0;
				border: 0;
			}
			.head-div .mui-input-row label {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				width: 55%;
				padding: 11px 39px;
			}
			.head-div .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~
			textarea {
				float: right;
				width: 45%;
				margin-bottom: 0;
				padding-left: 0;
				border: 0;
			}
			.head-div input {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				width: 55%;
				border: 0px;
				padding: 11px 39px;
			}
			.head-div	.mui-input-row {
				height: 40px;
			}
			.jiantoudiv {
				background: url(../../icon/danxuan.png) no-repeat 6% 50%;
				background-size: 16px 16px;
				font-size: 16px;
			}
			.mui-btn-warning:enabled:active {
				color: #fff;
				border: 1px solid #18b4ed;
				background-color: #18b4ed;
			}
			.mui-btn-warning, .mui-btn-yellow {
				color: #fff;
				border: 1px solid #18b4ed;
			}
			.course_select_footer {
				width: 100%;
				height: 8%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.next_btn {
				width: 92%;
				height: 67%;
				font-size: 16px;
				background: url(../../icon/add_research.png) no-repeat 33% 50%;
				background-size: 20px 20px;
				background-color: #18b4ed;
			}
			.btn_submit2 {
				width: 92%;
				height: 67%;
				font-size: 16px;
				border: 1px solid #18b4ed;
			}
			.swiper-wrapper {
				min-height: 400px
			}
			.quetion_tilte {
				margin-top: 2px;
			}
			.nav-item:active {
				color: #fff;
			}
		</style>
	</head>
	<body class="base_gary_bg_color">
		<div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
			<a class="base_left_item nav-item" href="#" onclick="backToast()"> 取消 </a>
			<span id="tilte_look">编辑问题</span>
			<a class="base_right_item nav-item" href="#" onclick="completeData()"> 保存 </a>
		</div>
		<div class="base_content_div base_content_font"  >
			<div class="swiper-container">
				<div class="swiper-wrapper" >
					<!--	<div class="swiper-slide" id="slide1">
					<div class="head-div">
					<div class="mui-input-row " style="background: #FFF;" onclick="StartPopu()">
					<label class="jiantoudiv" id="item_type">单选</label>
					<div style="float: right;padding: 10px 16px;" ><img class="width_20" id="type_img" src="../../icon/jiantouxia.png"/>
					</div>
					</div>
					</div>
					<form class="mui-input-group" style="background: #F0F0F0" id="question_div">
					<div class="mui-input-row">
					<label class="" >Q1:</label>
					<input id="" class="right_aligned_input base_content_font base_dark_grey" type="text" value="" placeholder="请输入问题" >
					</div>
					<div id="item_div1">
					<div class="mui-input-row " >
					<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" /></label>
					<input id="user_birthday" class="time_input right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" value="" >
					</div>
					<div class="mui-input-row " >
					<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" /></label>
					<input id="qqnumber" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" >
					</div>
					<div class="mui-input-row" id="item1">
					<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(1)"/></label>
					<input id="phonenumber" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" >
					</div>
					</div>
					<div class="mui-input-row" id="add_item1" onclick="addItem(1)">
					<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/add_xuanze.png"/></label>
					<span class="right_aligned_input font16 " style="padding: 10px 0px;" >添加选项</span>
					</div>
					</form>
					</div>-->
				</div>
			</div>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" style="display: none">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
					<strong class="weui_dialog_title" id="checkNum">是否放弃当前问题编辑页面？</strong>
				</div>
				<div class="weui_dialog_bd"></div>
				<div class="weui_dialog_ft">
					<a onclick="cleanCancel()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
					<a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
				</div>
			</div>
		</div>
		<div id="xueli" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" typeids="1">单选题</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" typeids="2">多选题</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#xueli" typeids="2"><b>取消</b></a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery-weui.min.js"></script>
	<script type="text/javascript" src="../../script/mui.min.js"></script>
	<script type="text/javascript" src="../../script/mui.dtpicker.js"></script>
	<script type="text/javascript" src="../../script/mui.picker.js"></script>
	<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var i = 0;
		var activeIndex = 0;
		var itemIndex = 0;
		var questionitemsArr = new Array();
		var questionArr = new Array();
		var len = 0;
		apiready = function() {
			addQuestion(0);
			ItemTypePoPu();
			listenScroll();
		}
		function returnBack() {
			api.closeWin({
			});
		}

		//退出提示
		function backToast() {
			$('#offlineAlert').show();
		}

		//确定
		function cleanConfirm() {
			$('#offlineAlert').hide();
			returnBack();
		}

		//取消
		function cleanCancel() {
			$('#offlineAlert').hide();
		}

		//得到题目数据
		function GetQuestionData(slideNumber) {
			var QuestionObj = new Object();
			//题目序号
			var questionno = '';
			//题目类型名称
			var subsecttitle = '';
			//选项对象
			var xuanzeObject = '';
			var options = new Array();
			var quesArr = new Array();
			var zimuArr = new Array();
			var lunshuContent = '';
			var form = $(".swiper-wrapper").children().eq(slideNumber).find("input[name='options[]']");
			form.each(function(i) {
				if ($(this).val()) {
					lunshuContent = form.eq(i).val();
					quesArr[i] = lunshuContent;
					zimuArr.push(fromCharCode(i + 1).toString())
				}
			});
			for (var i = 0; i < quesArr.length; i++) {
				options.push({
					id : zimuArr[i],
					desc : quesArr[i],
				});
			}
			QuestionObj.questionno = parseInt($(".swiper-wrapper").children().eq(slideNumber).attr('questionno')) + 1;
			QuestionObj.subsecttitle = $(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html();
			QuestionObj.type = strReturnResearchType($(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html());
			QuestionObj.titile = $(".swiper-wrapper").children().eq(slideNumber).find('input').eq(0).val();
			QuestionObj.question_type = str2ReturnResearchType($(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html());
			QuestionObj.options = options;
			questionitemsArr[slideNumber] = QuestionObj;
			questionArr = api.pageParam.data;
			questionArr[api.pageParam.index] = QuestionObj;
		}

		// 滚动监听
		function listenScroll() {
			var winHeight = $(window).height();
			//获取当前页面高度
			$(window).resize(function() {
				var thisHeight = $(this).height();
				if (winHeight - thisHeight > 50) {
					//当软键盘弹出，在这里面操作
					$("#next_bt").css('display', 'none');
				} else {
					$("#next_bt").css('display', 'block');
					//当软键盘收起，在此处操作
				}
			});
		}

		//添加下一题
		function addQuestion(index) {
			var Q_index = '';
			Q_index = index;
			var arr = api.pageParam.data;
			var data = arr[api.pageParam.index];
			var questionStr = "Q" + (api.pageParam.index + 1);
			var options = data.options;
			$(".swiper-wrapper").append('<div class="swiper-slide" id="slide' + (index + 1) + '" onclick="GetQuestionData(' + index + ')"  questionno="' + Q_index + '">' + '<div class="head-div">' + '<div class="mui-input-row " style="background: #FFF;" onclick="StartPopu()">' + '<label class="jiantoudiv" id="item_type' + (index + 1) + '">' + data.subsecttitle + '</label>' + '<div style="float: right;padding: 10px 16px;" ><img class="width_20" id="type_img" src="../../icon/jiantouxia.png"/>' + '</div>' + '</div>' + '</div>' + '<form class="mui-input-group" style="background: #F0F0F0" id="question_group' + index + '">' + '<div class="mui-input-row">' + '<label class="quetion_tilte" >' + questionStr + ':</label>' + '<input id="" class="right_aligned_input base_content_font base_dark_grey" type="text" value="' + data.titile + '" placeholder="请输入问题"  name="question">' + '</div>' + '<div id="item_div' + (index + 1) + '" class="xuanzhe-list" >' + '</div>' + '<div class="mui-input-row" id="add_item' + (index + 1) + '" onclick="addItem(' + (index + 1) + ',this)">' + '<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/add_xuanze.png"/></label>' + '<span class="right_aligned_input font16 " style="padding: 10px 0px;" >添加选项</span>' + '</div>' + '</form>' + '</div>');
			if (options.length >= 6) {
				$("#add_item" + (index + 1)).css("display", "none");
			} else {
				$("#add_item" + (index + 1)).css("display", "block");
			}
			for (var k = 0; k < options.length; k++) {
				$("#item_div" + (index + 1)).append('<div class="mui-input-row " id="item' + (k) + '">' + '<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + (index + 1) + ',this)"/>' + '</label>' + '<input name="options[]" class="right_aligned_input base_content_font base_dark_grey top_2" type="text" placeholder="请输入选项"  value="' + options[k].desc + '" Itemindex="' + k + '">' + '</div>');
			}
		}

		//添加下个选项
		function addItem(index, obj) {
			itemIndex = itemIndex + 1;
			//		    if(fromLen<6){
			$("#item_div" + (index)).append('<div class="mui-input-row " id="item' + (itemIndex) + '">' + '<label class="base_grey"><img class="width_20 removeLink" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + index + ',this)"/></label>' + '<input name="options[]" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" Itemindex="' + itemIndex + '">' + '</div>');
			var fromLen = $(".swiper-wrapper").children().eq(activeIndex).find("input[name='options[]']").size();
			if (fromLen > 5) {
				obj.style.display = "none";
			}
		}

		function StartPopu() {
			mui('#xueli').popover('toggle');
		}

		//删除选项
		function removeHtml(sindex, obj) {
			var itemLen = $(obj).parents("#item_div" + (sindex)).find("input[name='options[]']").size();
			if (itemLen > 2) {
				$(obj).parents(".mui-input-row").remove();
			} else {
				alert('当前问题至少需要设置两个不同的选项');
			}
			if (itemLen < 7) {
				$("#add_item" + (sindex)).css("display", "block");
			}
		}

		//题目类型
		function ItemTypePoPu() {
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				//			alert(activeIndex);
				var typeid = $(this).attr('typeids');
				if (typeid == 1) {
					mui('#xueli').popover('toggle');
					$("#item_type" + (activeIndex + 1)).text('单选题');
				} else if (typeid == 2) {//选择本科
					mui('#xueli').popover('toggle');
					$("#item_type" + (activeIndex + 1)).text('多选题');
				}
			});
		}

		//完成题目的组建
		function completeData() {
			GetQuestionData(0);
			var names = $(".swiper-wrapper").children().eq(0).find('input').eq(0).val().trim();
			var options = questionitemsArr[0].options;
			var fromLen = $(".swiper-wrapper").children().eq(0).find("input[name='options[]']").size();
			if (names == "" || names == undefined || isOnlySpaceOrEnter(names)) {
				alert('请输入问题');
				return false;
			}
			var items = ArrNullText(options);
			if (items.length) {
				alert('选项不可为空！');
				return false;
			}
			if (options == "") {
				alert('问题选项不能为空');
				return false;
			}
			//			if (options.length < 2) {
			//				alert('当前问题至少需要设置两个不同的选项');
			//				return false;
			//			}
			//			if (options.length > 6) {
			//				alert('最多只能设置6个选项');
			//				return false;
			//			}
			if (options.length < fromLen) {
				alert('选项不可为空');
				return false;
			}
			var same = sameNameText(options);
			if (same.length) {
				alert('选项重复，请设置不同的选项');
				return false;
			}
			if (api.pageParam.type != 10) {
				api.openWin({useWKWebView:true,
					name : 'Teacher_AddResearchDetailWindow',
					url : 'Teacher_AddResearchDetailWindow.html',
					pageParam : {
						data : questionArr,
						type : 1,
						type1 : 9,
						classarr : api.pageParam.classarr,
						pid : api.pageParam.pid,
						cid : api.pageParam.cid,
						sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle
					},
					slidBackEnabled : false,
					reload : true
				});
			} else {
				api.openWin({useWKWebView:true,
					name : 'Teacher_EditResearchListDetailWin',
					url : 'Teacher_EditResearchListDetailWin.html',
					pageParam : {
						data : questionArr,
						type1 : 12,
						classarr : api.pageParam.classarr,
						pid : api.pageParam.pid,
						cid : api.pageParam.cid,
						sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle
					},
					slidBackEnabled : false,
					reload : true
				});
			}
		}
	</script>
</html>
